<template>
  <view class="app-layout">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view v-if="showNavbar" class="navbar" :style="navbarStyle">
      <view class="navbar-left" @click="handleBack">
        <text v-if="showBack" class="back-icon">‹</text>
      </view>
      <view class="navbar-center">
        <text class="navbar-title">{{ title }}</text>
      </view>
      <view class="navbar-right">
        <slot name="navbar-right"></slot>
      </view>
    </view>

    <!-- 主内容区域 -->
    <view class="main-content" :style="mainContentStyle">
      <slot></slot>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// Props
interface Props {
  title?: string
  showNavbar?: boolean
  showBack?: boolean
  backgroundColor?: string
  navbarColor?: string
  titleColor?: string
  fixed?: boolean
  safeArea?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  showNavbar: true,
  showBack: false,
  backgroundColor: '#f8f8f8',
  navbarColor: '#ffffff',
  titleColor: '#333333',
  fixed: true,
  safeArea: true
})

// 响应式数据
const statusBarHeight = ref(0)
const safeAreaBottom = ref(0)

// 计算属性
const navbarStyle = computed(() => {
  return {
    backgroundColor: props.navbarColor,
    position: props.fixed ? 'fixed' : 'relative',
    top: props.fixed ? statusBarHeight.value + 'px' : '0',
    left: '0',
    right: '0',
    zIndex: '999'
  }
})

const mainContentStyle = computed(() => {
  const baseStyle = {
    backgroundColor: props.backgroundColor,
    minHeight: `calc(100vh - ${statusBarHeight.value}px - ${props.showNavbar ? 44 : 0}px - ${safeAreaBottom.value}px)`
  }

  if (props.fixed) {
    return {
      ...baseStyle,
      paddingTop: `${props.showNavbar ? 44 : 0}px`
    }
  }

  return baseStyle
})

// 生命周期
onMounted(() => {
  getSystemInfo()
})

// 方法
/**
 * 获取系统信息
 */
const getSystemInfo = () => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight || 0
      safeAreaBottom.value = res.safeAreaInsets?.bottom || 0
    },
    fail: (error) => {
      console.error('获取系统信息失败:', error)
      // 设置默认值
      statusBarHeight.value = 44
      safeAreaBottom.value = 34
    }
  })
}

/**
 * 返回上一页
 */
const handleBack = () => {
  if (!props.showBack) return

  uni.navigateBack({
    delta: 1,
    fail: () => {
      // 如果返回失败，跳转到首页
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  })
}

// 暴露方法给父组件
defineExpose({
  getSystemInfo
})
</script>

<style lang="scss" scoped>
.app-layout {
  min-height: 100vh;
  position: relative;
}

.status-bar {
  width: 100%;
  background: transparent;
}

.navbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  .navbar-left {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .back-icon {
      font-size: 24px;
      font-weight: bold;
      color: v-bind(titleColor);
    }
  }

  .navbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .navbar-title {
      font-size: 18px;
      font-weight: 600;
      color: v-bind(titleColor);
      text-align: center;
    }
  }

  .navbar-right {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.main-content {
  width: 100%;
  position: relative;
}

.safe-area-bottom {
  width: 100%;
  background: transparent;
}
</style>